<template>
    <div class="user-edit-container">
        <!-- 标题 -->
        <!-- 表单区域 -->
        <div class="form-content">
            <!-- 头像上传 -->
            <div class="form-item">
                <div class="item-label">头像<span class="required-star">*</span></div>
                <div class="avatar-upload">
                    <img :src="form.avr || defaultAvatar" class="avatar-preview">
                    <van-uploader :after-read="handleAvatarUpload">
                        <div class="upload-btn">点击更换</div>
                    </van-uploader>
                </div>
            </div>

            <!-- 昵称 -->
            <div class="form-item">
                <div class="item-label">昵称<span class="required-star">*</span></div>
                <van-field v-model="form.nickName" placeholder="请输入昵称" class="form-input" />
            </div>

            <!-- 手机号 -->
            <div class="form-item">
                <div class="item-label">手机号<span class="required-star">*</span></div>
                <van-field v-model="form.phone" placeholder="请输入手机号" type="tel" class="form-input" />
            </div>

            <!-- 性别选择 -->
            <div class="form-item">
                <div class="item-label">性别<span class="required-star">*</span></div>
                <van-field readonly clickable :value="genderText" placeholder="请选择性别" @click="showGenderPicker = true"
                    class="form-input" />
                <van-popup v-model="showGenderPicker" position="bottom">
                    <van-picker show-toolbar :columns="genderOptions" @confirm="onGenderConfirm"
                        @cancel="showGenderPicker = false" />
                </van-popup>
            </div>

            <!-- 密码修改 -->
            <div class="form-item">
                <div class="item-label">修改密码</div>
                <van-field v-model="form.password" :type="showPassword ? 'text' : 'password'" placeholder="请输入新密码"
                    class="form-input">
                    <template #right-icon>
                        <span class="eye-icon" @click="showPassword = !showPassword">
                            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
                        </span>
                    </template>
                </van-field>
            </div>

            <!-- 提交按钮 -->
            <div class="form-submit">
                <van-button block type="primary" class="submit-btn" @click="handleSubmit">
                    确认修改
                </van-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import uploadApi from '@/plugins/api/upload'
import userApi from '@/plugins/api/user'
import { hostURL } from '@/plugins/utils/config'
import { userCaozuo, updateSelf } from '@/plugins/utils/caozuojilu'
export default {
    data() {
        return {
            form: {
                avr: '',
                nickName: '',
                phone: '',
                password: '',
                gender: 0
            },
            self: this.$global.self,
            defaultAvatar: require('@/assets/avr.jpg'),
            showPassword: false,
            showGenderPicker: false,
            genderOptions: [
                { text: '未知', value: 0 },
                { text: '男', value: 1 },
                { text: '女', value: 2 },
            ]
        };
    },
    mounted() {
        this.form = JSON.parse(JSON.stringify(this.self))
    },
    computed: {
        genderText() {
            const option = this.genderOptions.find(item => item.value === this.form.gender);
            return option ? option.text : '未知';
        }
    },
    methods: {
        async handleAvatarUpload(file) {
            const res = await uploadApi.uploadImg(file.file)
            console.log(res);
            if (res.code === 200) {
                this.$toast.success('头像上传成功');
                this.form.avr = `${hostURL}/uploads/${res.data}`
            } else {
                this.$toast.fail(res.msg)
            }
        },
        onGenderConfirm(value) {
            this.form.gender = value.value;
            this.showGenderPicker = false;
        },
        async handleSubmit() {
            const res = await userApi.update(this.form)
            if (res.code === 200) {
                this.$toast.success('信息更新成功');
                await updateSelf(res.data)
                await userCaozuo.update(res.data)
                this.$router.back()
            } else {
                this.$toast.fail(res.msg)
            }
        }
    }
}
</script>
  
<style lang="scss" scoped>
.user-edit-container {
    padding: 16px;
    background: #fff;
    // min-height: 100vh;
}

.form-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 24px;
    color: #333;
}

.form-content {
    background: #fff;
}

.form-item {
    margin-bottom: 20px;
}

.item-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;

    .required-star {
        color: #f44;
        margin-left: 4px;
    }
}

.form-input {
    background: #f7f8fa;
    border-radius: 4px;
    padding: 12px 16px;
}

.avatar-upload {
    display: flex;
    align-items: center;

    .avatar-preview {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        object-fit: cover;
        margin-right: 12px;
        border: 1px solid #eee;
    }

    .upload-btn {
        padding: 6px 12px;
        background: #f7f8fa;
        border-radius: 4px;
        color: #1989fa;
        font-size: 14px;
    }
}

.eye-icon {
    color: #969799;
    font-size: 16px;
}

.form-submit {
    margin-top: 32px;
}

.submit-btn {
    background: #1989fa;
    border: none;
    border-radius: 4px;
    height: 44px;
    font-size: 16px;
}
</style>